<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index2.min.css">

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>

<body>
    <div class="box">
        <a href="./index.html"><button id="btn1">返回主页</button></a>
        <div class="main">
            <div class="top">
                <select class="xiala">
                </select>
            </div>
            <div class="span">
                <span>场次</span>
                <span>状态</span>
            </div>
            <div class="newSpan">

            </div>
            <!-- <div class="span1">
                <span id="span"></span>
                <span class="soso"></span>
            </div>
            <div class="span2">
                <span id="span1"></span>
                <span class="soso1"></span>
            </div>
            <div class="span3">
                <span id="span2"></span>
                <span class="soso2"></span>
            </div> -->
            <div class="span4">
                <span>★ 一个手机号，一天只能预约一场。</span>
            </div>
        </div>
    </div>

</body>
<script>
    let select = document.querySelector("select");
    let a = localStorage.getItem("token");
    let option = document.querySelector("option");
    let _data, flag;
    let status;
    let Data_;
    let dataTime;
    let id_;

    let newSpan = document.querySelector('.newSpan');

    let soso = document.querySelector(".soso");
    //GET请求
    fetch(`http://newshopapi.0melon0.cn/api/f_user/chooselist?token=${a}`, {
        method: "GET", //type请求类型；
        headers: { //设置请求头，表单编码格式传输数据(参数)
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }).then(function(response) {
        return response.json(); //转json格式返回值
    }).then(function(data) {
        // console.log(data.result.list);
        let b = data.result.list;
        for (k in b) {
            let option = document.createElement("option")
            option.innerHTML += b[k].day_time;
            select.appendChild(option)
        }
        localStorage.setItem("value", select.firstElementChild.innerText);


        function Fn() {
            // console.log(select.value);
            localStorage.setItem("data=", select.value)
                //GET请求
            fetch(`http://newshopapi.0melon0.cn/api/f_user/chooseday?token=${a}&day_time=${localStorage.getItem("data=")}`, {
                method: "GET", //type请求类型；
                headers: { //设置请求头，表单编码格式传输数据(参数)
                    "Content-Type": "application/x-www-form-urlencoded"
                }
            }).then(function(response) {
                return response.json(); //转json格式返回值
            }).then(function(data) {
                // console.log(data.result.list);
                dataTime = data.result.list;

                dataTime.forEach((item) => {
                    // console.log(item.show_id);
                    // console.log(item.day_time);
                    // console.log(item.day_time.slice(0, 10), item.show_name.slice(0, 5), item.show_name.slice(6, 11));
                    let time1 = item.day_time.slice(0, 10); //2021-10-23
                    let time2 = item.show_name.slice(0, 5); //09:00
                    let time3 = item.show_name.slice(6, 11); //12:00
                    // console.log(time1, time2, time3);

                    let timer3 = new Date(time1 + " " + time3).getTime(); //12
                    let timer1 = new Date(time1 + " " + time2).getTime(); //9
                    let timer = new Date().getTime() //当前时间
                        // status //预约状态
                        // console.log(timer1, timer, timer3);

                    //检测当前时间值是否小于或等于预约时间
                    // console.log(timer1 <= timer);
                    // console.log(timer3 >= timer);
                    if (timer1 >= timer && timer3 >= timer) {
                        status = "可预约";
                        flag = true;
                    } else {
                        status = "已约满";
                        flag = false;
                    }
                    // console.log(item.show_id);
                    newSpan.innerHTML += ` <div class="span1">
                                            <span id="span">${item.show_name}</span>
                                          <span class="soso" datas=${item.show_name} id=${item.show_id}>${status}</span>
                                        </div>`
                });
                // let active = document.querySelector(".active");
                document.querySelectorAll(".soso").forEach(val => {
                    val.addEventListener('click', function() {

                        localStorage.setItem("show_id", ` ${val.id}`)
                        fnn();
                        // console.log(val.id);
                        let str = val.getAttribute("datas");
                        localStorage.setItem("times", str);
                        let newStr = str.slice(0, 5);
                        console.log(newStr);
                        localStorage.setItem("newStr=", newStr);
                        if (val.innerHTML == "已约满") {
                            layer.alert("当前已约满，请重新预约");
                        } else if (val.innerHTML == "可预约") {
                            layer.alert("可预约！正在进入预约界面...");
                            setTimeout(() => {
                                flag && (location.href = './success.html')
                                    // val.href = "http://127.0.0.1:5500/success.html#";
                                    // val.click();
                            }, 2000)
                        }
                    })
                })

            }).catch(function(error) {
                console.log(error); //获取请求失败的结果
            })
        }
        Fn();

        select.addEventListener("change", () => {
            newSpan.innerHTML = '';
            Fn();
            // console.log(select.value);
            localStorage.setItem("value", select.value);
            // let nba = data.result.list;
            // nba.forEach((item) => {
            //     console.log(item.day_time);
            // })
        })
        let _add = localStorage.getItem("show_id");

        function fnn() {
            // POST请求
            fetch("http://newshopapi.0melon0.cn/api/f_user/bookday", {
                method: "POST", // type请求类型
                body: JSON.stringify({
                    "token": a,
                    "day_time": localStorage.getItem("data="),
                    "show_id": _add
                }),
                // body: "type=冷笑话", //参数放置请求体
                headers: { //设置请求头，表单编码格式传输数据(参数)
                    // "Content-Type": "application/x-www-form-urlencoded" //表单验证
                    "Content-Type": "application/json"
                },
            }).then(function(response) {
                return response.json(); //转j son格式返回值，解析为可读数据
            }).then(function(data) {
                // console.log(data);
                // console.log(data.result.id); //获取请求成功的结果
                let _Id = data.result.id;
                let _name = data.result.name;
                localStorage.setItem("_name", _name)
                localStorage.setItem("_id", _Id)
            }).catch(function(error) {
                console.log(error); //获取请求失败的结果
            });
        }

    }).catch(function(error) {
        console.log(error); //获取请求失败的结果
    })
</script>

</html>